import { getEleAttr } from '../utils/tools'

export default {
    mounted(el) {
        const wrapEle = el,
            magEle = wrapEle.querySelector('.mag-wrap'),
            magImgEle = wrapEle.querySelector('.mag-img'),
            wrapWidth = getEleAttr(wrapEle, 'width'),
            wrapHeight = getEleAttr(wrapEle, 'height'),
            magWidth = getEleAttr(magEle, 'width'),
            magHeight = getEleAttr(magEle, 'height'),
            wrapTop = wrapEle.offsetTop,
            wrapLeft = wrapEle.offsetLeft;
        
        init();

        function init() {
            bindEvents();
        }

        function bindEvents() {
            wrapEle.addEventListener('mouseover',function (e) {
                magEle.className = 'mag-wrap show';
                wrapEle.addEventListener('mousemove',handleMouseMove);
            });
            wrapEle.addEventListener('mouseout', function (e) {
                magEle.className = 'mag-wrap';
                wrapEle.removeEventListener('mousemove', handleMouseMove)
            })
        }

        function handleMouseMove(e) {
            const { x, y, magX, magY } = getXY(e);
            magEle.style.left = magX + 'px';
            magEle.style.top = magY + 'px';
            magImgEle.style.left = -magX + 'px';
            magImgEle.style.top = -magY + 'px';
            if (x < 0 || x > wrapWidth || y < 0 || y > wrapHeight) {
                magEle.className = 'mag-wrap';
                wrapEle.removeEventListener('mousemove', handleMouseMove)
            }
        }

        function getXY(e) {
            return {
                x: e.pageX - wrapLeft,
                y: e.pageY - wrapTop,
                magX: e.pageX - wrapLeft - magWidth / 2,
                magY: e.pageY - wrapTop - magHeight / 2
            }
        }
    },
}